<template>
  <el-container class="shite">
    <el-aside class="left" width="180px">
      <el-menu
        default-active="Manual"
        @select="change"
        class="left-menu"
        active-text-color="#2B2B2B"
      >
        <el-menu-item index="Manual" style="text-align:left;">
          <span slot="title"><img src="static/secondary-Automatically.png">&nbsp;手动派单列表</span>
        </el-menu-item>
        <el-menu-item index="Auto" style="text-align:left;">
          <span slot="title"><img src="static/secondary-manual.png">&nbsp;自动派单列表</span>
        </el-menu-item>
        <el-submenu index="Member" popper-class="dddf" style="text-align:left;">
          <template slot="title">
            <span><img src="static/secondary-Maintenance.png">&nbsp;维修人员</span>
          </template>
          <el-menu-item index="MemberManagement">维修人员信息</el-menu-item>
         <!-- <el-menu-item index="AddMember">添加维修人员</el-menu-item>-->
        </el-submenu>
        <el-menu-item index="RepairSummary" style="text-align:left;">
          <span slot="title"><img src="static/secondary-situation.png">&nbsp;维修情况</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container class="right">
      <component :is="currentView"></component>
    </el-container>
  </el-container>
</template>

<script>
import Manual from "./components/manual";
import Auto from "./components/auto";
import AddMember from "./components/addMember";
import MemberManagement from "./components/memberManage"
import RepairSummary from "./components/repairSummary"

export default {
  name: "repair",
  components: {
    Manual,
    Auto,
    AddMember,
    MemberManagement,
    RepairSummary
  },
  data() {
    return {
      currentView: "Manual",
      fullHeight: document.documentElement.clientHeight - 95
    };
  },
  created() {
    console.log(document.documentElement.clientHeight);
  },
  methods: {
    change(name) {
      console.log(name);
      this.currentView = name;
    },
  }
};
</script>

<style scoped lang="less">
.shite {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  background-color: #fff;
  .left {
    width: 180px;
    height: 100%;
    background-color: #f2f7fb;
    overflow-x: hidden;
    .left-menu {
      text-align: center;
      background-color: #f2f7fb;
      .el-menu-item {
        font-size: 16px;
      }
      span {
        font-size: 16px;
      }
      .el-submenu{
          li{
              font-size: 14px;
              color: #747474 !important;
          }
      }
    }
  }
  /* ::-webkit-scrollbar {
    display: none;
  } */
  .right {
    flex: 1;
    padding: 20px;
  }
}
</style>

<style lang="less">
.left {
  .el-menu {
    background-color: #f2f7fb;
  }

  .el-menu-item {
    color: #2b2b2b !important;
    border-bottom: 1px solid #cddeed;
  }
  .el-submenu__title {
    border-bottom: 1px solid #cddeed;
  }
  .el-submenu__title:hover{
    color: #303133;
  }
  .el-menu-item.is-active {
    background-color: #E6E6E6;
  }
  .el-submenu.is-active {
    .el-menu-item.is-active {
      background-color: #E6E6E6;
    }
  }
  .el-submenu.is-active .el-submenu__title {
    border-bottom: 1px solid #cddeed;
  }
}
</style>
